<template>
<div class="login_body">
    <div>
        <input class="login_text" type="text" placeHolder="账户名/手机号/Email" v-model="un" id="uname">
    </div>
    <div>
        <input class="login_text" type="password" placeHolder="请输入您的密码" v-model="pw" id="pwd">
    </div>
    <div class="login_btn">
        <input type="submit" value="登录" @click="loginHandler">
    </div>
    <div class="login_link">
        <button type="button" @click="registrender">立即注册</button>
        <button type="button" >找回密码</button>
    </div>
</div>  
</template>

<script>
export default {
    name:'Login',
    data() {
        return {
            un:'',
            pw:''
        }
    },

    methods: {
        registrender(){
            this.$router.push('/mine/regist')
        },  

        async loginHandler(){
            var user= document.getElementById("uname");

           var pd=document.getElementById("pwd");
           if(user.value == " " || pd.value==""){

          alert("用户名或密码不能为空！");

           return false

        }    
           await this.$store.dispatch('asyncLogin',{
                un:this.un,
                pw:this.pw
            })
             //跳转我的主页

            this.$router.push('/home')
        }
  
    },
}
</script>

<style scoped>
#content .login_body{  width:100%;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link button{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;border: none;background: white;}
</style>